<template>
  <div>
    <!--1.面包屑-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card shadow="always" class="el-card">
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          type="index"
          label="序号"
          width="50">
        </el-table-column>
        <el-table-column
          prop="authName"
          label="权限名称"
          width="180">
        </el-table-column>
        <el-table-column
          prop="path"
          label="路径"
          width="180">
        </el-table-column>
        <el-table-column
          prop="level"
          label="权限等级">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.level==='0'">等级一</el-tag>
            <el-tag v-else-if="scope.row.level==='1'" type="success">等级二</el-tag>
            <el-tag v-else type="danger">等级三</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script>
  export default {
    data(){
      return{
        tableData:[]
      }
    },
    created () {
      this.getRightsList()
    },
    methods:{
      getRightsList(){
        //需要授权的API 必须在请求头中使用 Authorization 字段 提供 token 令牌
        // const AUTH_TOKEN = localStorage.getItem('token')
        // this.$http.defaults.headers.common['Authorization'] = AUTH_TOKEN
        this.$http.get(`rights/list`).then(res=>{
          console.log(res,'获取权限列表')
          this.tableData = res.data.data
          // for(var i= 0;i<this.tableData.length;i++){
          //   this.tableData[i].level = this.changeLevel(this.tableData[i].level)
          // }
        })
      },
      //字段翻译
      // changeLevel(val){
      //   if (val==='0'){val='一级'}else if(val==='1'){val='二级'}else if(val==='2'){val='三级'}
      //   return val
      // }
    }
  }
</script>
<style>
  .el-card {
    margin-top: 16px;
  }
</style>
